<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"/>
    <xsl:template match="carts">
        <table border="1" id="checkoutTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Product Image</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <xsl:for-each select="cart">
                    <tr>
                        <td>
                            <xsl:value-of select="position()" />
                        </td>
                        <td>
                            <xsl:element name="img">
                                <xsl:attribute name="src">
                                    <xsl:value-of select="image"/>
                                </xsl:attribute>
                                <xsl:attribute name="width">
                                    <xsl:text>49px</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="height">
                                    <xsl:text>49px</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="onmouseover">
                                    <xsl:value-of select="'productMouserOverCart('"/>
                                    <xsl:value-of select="productId"/>
                                    <xsl:value-of select="')'"/>
                                </xsl:attribute>
                                <xsl:attribute name="onmouseout">
                                    <xsl:value-of select="'productMouseOut()'"/>
                                </xsl:attribute>
                            </xsl:element>
                        </td>
                        <td>
                            <xsl:element name="a">
<!--                                <xsl:attribute name="href">
                                    <xsl:text>detail.jsp?txtProductId=</xsl:text>
                                    <xsl:value-of select="productId"/>
                                </xsl:attribute>-->
                                <xsl:value-of select="name"/>
                            </xsl:element>
                        </td>
                        <td>
                            <xsl:value-of select="price"/>
                        </td>
                        <td>
                            <xsl:element name="input">
                                <xsl:attribute name="type">
                                    <xsl:text>text</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="id">
                                    <xsl:value-of select="productId"/>
                                </xsl:attribute>
                                <xsl:attribute name="size">
                                    <xsl:text>2</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="value">
                                    <xsl:value-of select="quantity"/>
                                </xsl:attribute>
                                <xsl:attribute name="maxlength">
                                    <xsl:text>2</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="style">
                                    <xsl:text>width : 25px;</xsl:text>
                                </xsl:attribute>
                            </xsl:element>
                            <xsl:element name="a">
                                <xsl:attribute name="onclick">
                                    <xsl:text>editQuantity(</xsl:text>
                                    <xsl:value-of select="productId"/>
                                    <xsl:text>)</xsl:text>
                                </xsl:attribute>
                                <xsl:element name="img">
                                    <xsl:attribute name="src">
                                        <xsl:text>images/updateQty.png</xsl:text>
                                    </xsl:attribute>
                                    <xsl:attribute name="width">
                                        <xsl:text>15px</xsl:text>
                                    </xsl:attribute>
                                    <xsl:attribute name="height">
                                        <xsl:text>15px</xsl:text>
                                    </xsl:attribute>
                                </xsl:element>
                            </xsl:element>
                        </td>
                        <td>
                            <xsl:text>$ </xsl:text>
                            <xsl:value-of select="format-number(subtotal, '#,###.00')"/>
                        </td>
                    </tr>
                </xsl:for-each>
                <tr>
                    <td colspan="5" align="right" style="border-top: 1px solid #DDD; border-right: 1px solid #DDD;">
                        <b>
                            <xsl:text>Total Amount</xsl:text>
                        </b>
                    </td>
                    <td align="center" style="border-top: 1px solid #DDD;">
                        <b>
                            <xsl:text>$</xsl:text>
                            <xsl:value-of select="format-number(sum(cart/subtotal), '###,###.00')"/>
                            <xsl:text> USD</xsl:text>
                        </b>
                        
                    </td>
                </tr>
            </tbody>
        </table>
    </xsl:template>

</xsl:stylesheet>
